<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

  <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <!-- 引入动态缩放字体 -->

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./static/js/flexible.js"></script>
  <title>myvue</title>
  <style>
    html,body{
      position: relative; 
      margin: 0 ;
      padding: 0;
      overflow-x: hidden;
      width: 100%;
      height: 100%;
    }
    .container{
      margin: 0  auto;
      padding: 0 auto;
      /* text-align: center; */
    }
    .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  ul.nav-pills {
      top: 20px;
      position: fixed;
  }
  div.col-8 div {
      height: 500px;
  }
  </style>
</head>
<body   >


  <div class="container" id="app2">
     <h3>{{message}} -app2</h3>

    <div class="container">
      <h2>代表指定意义的文本颜色</h2>
      <p class="text-muted">柔和的文本。</p>
      <p class="text-primary">重要的文本。</p>
      <p class="text-success">执行成功的文本。</p>
      <p class="text-info">代表一些提示信息的文本。</p>
      <p class="text-warning">警告文本。</p>
      <p class="text-danger">危险操作文本。</p>
      <p class="text-secondary">副标题。</p>
      <p class="text-dark">深灰色文字。</p>
      <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
      <p class="text-white">白色文本（白色背景上看不清楚）。</p>
    </div>
    <h2>边框圆角设置</h2>
    <p>使用rounded 类可以添加圆角边框:</p> 
    <span class="rounded">sret </span><!--全部圆角-->
    <span class="rounded-top">gsdg </span><!--上方圆角-->
    <span class="rounded-right">sdfg ag </span><!--右边圆角-->
    <span class="rounded-bottom">asdg g</span><!--下方圆角-->
    <span class="rounded-left">ag ad</span><!--左边圆角-->
    <span class="rounded-circle">sdg ag </span><!--原型图片-->
    <span class="rounded-0">asg </span><!--没有圆角-->
  </div>


    <div class="container data-spy="scroll" data-target="#myScrollspy" data-offset="1"">
      <!-- <div class="container-fluid">
        <div class="row">
          <nav class="col-sm-3 col-4" id="myScrollspy">
            <ul class="nav nav-pills flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#section1">Section 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#section2">Section 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#section3">Section 3</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#section41">Link 1</a>
                  <a class="dropdown-item" href="#section42">Link 2</a>
                </div>
              </li>
            </ul>
          </nav>
          <div class="col-sm-9 col-8">
            <div id="section1" class="bg-success">    
              <h1>Section 1</h1>
              <p>学编程，从W3Cschool开始！</p>
            </div>
            <div id="section2" class="bg-warning"> 
              <h1>Section 2</h1>
              <p>学编程，从W3Cschool开始！</p>
            </div>        
            <div id="section3" class="bg-secondary">         
              <h1>Section 3</h1>
              <p>学编程，从W3Cschool开始！</p>
            </div>
            <div id="section41" class="bg-danger">         
              <h1>Section 4-1</h1>
              <p>学编程，从W3Cschool开始！</p>
            </div>      
            <div id="section42" class="bg-info">         
              <h1>Section 4-2</h1>
              <p>学编程，从W3Cschool开始！</p>
            </div>
          </div>
        </div>
      </div> -->

    
    
      <div class="container">
       
          <div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 1</h1>
        <p>学编程，从W3Cschool开始！</p>
      </div>
      <div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 2</h1>
        <p>学编程，从W3Cschool开始！</p>
      </div>
      <div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 3</h1>
        <p>学编程，从W3Cschool开始！</p>
      </div>
      <div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 4 Submenu 1</h1>
        <p>学编程，从W3Cschool开始！</p>
      </div>
      <div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 4 Submenu 2</h1>
        <p>学编程，从W3Cschool开始！</p>
      </div>
    
      <h3>弹出框实例</h3> <br>
      <a href="#" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a>
    </div>
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
    <div class="container">
      <h3>提示框实例</h3><br>
      <a href="#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>
      <a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
      <a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
      <a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>
    </div>
    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>
    <div class="container">
      <h3>提示框实例</h3><br>
      <a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
    </div>
    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>
    <h2>模态框实例</h2>
    <!-- 按钮：用于打开模态框 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      打开模态框
    </button>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <!-- 模态框头部 -->
          <div class="modal-header text-info sm">
            <h5 class="modal-title">模态框头部</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <!-- 模态框主体 -->
          <div class="modal-body bg-defaul sm text-warning">
            模态框内容..
            <div class="bg-defaul text-warning" >
                <p>来说代理费</p>
            </div>
          </div>
          <!-- 模态框底部 -->
          <div class="modal-footer text-danger ">
            <button type="button" class="btn btn-secondary font-smallern font-sm" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
     </div>

  <div class="container data-spy="scroll" data-target="#myScrollspy" data-offset="1"">
    <div id="demo" class="carousel slide" data-ride="carousel">
      <!-- 指示符 -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      <!-- 轮播图片 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://atts.w3cschool.cn/attachments/knowledge/201803/24575.png">
          <div class="carousel-caption">
            <h3>第一张图片描述标题</h3>
            <p>描述文字!</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://atts.w3cschool.cn/attachments/knowledge/201702/43125.png">
          <div class="carousel-caption">
            <h3>第二张图片描述标题</h3>
            <p>描述文字!</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://atts.w3cschool.cn/attachments/knowledge/201804/30601.png">
          <div class="carousel-caption">
            <h3>第三张图片描述标题</h3>
            <p>描述文字!</p>
          </div>
        </div>
      </div>
      <!-- 左右切换按钮 -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
    
    <div id="demo" class="carousel slide" data-ride="carousel">
      <!-- 指示符 -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      <!-- 轮播图片 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://atts.w3cschool.cn/attachments/knowledge/201803/24575.png">
        </div>
        <div class="carousel-item">
          <img src="https://atts.w3cschool.cn/attachments/knowledge/201801/31740.png">
        </div>
        <div class="carousel-item">
          <img src="https://atts.w3cschool.cn/attachments/knowledge/201804/30601.png">
        </div>
      </div>
      <!-- 左右切换按钮 -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
    <h2>堆叠表单</h2>
    <form>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <h2>分页</h2>
    <p>要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类：</p>                  
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </div>
  <div class="container">
    <h2>基本进度条</h2>
    <p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p>
    <div class="progress">
      <div class="progress-bar" style="width:70%"></div>
    </div>
  </div>
  <div class="container">
    <h2>徽章</h2>
    <h1>测试标题 <span class="badge badge-secondary">New</span></h1>
    <h2>测试标题 <span class="badge badge-secondary">New</span></h2>
    <h3>测试标题 <span class="badge badge-secondary">New</span></h3>
    <h4>测试标题 <span class="badge badge-secondary">New</span></h4>
    <h5>测试标题 <span class="badge badge-secondary">New</span></h5>
    <h6>测试标题 <span class="badge badge-secondary">New</span></h6>
  </div>

  <div class="container">
    <h2>按钮组</h2>
    <p> .btn-group 类用于创建按钮组:</p>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <button type="button" class="btn btn-primary">Sony</button>
    </div>
  </div>
  <div class="container">


    <h2>响应式表格</h2>
  <p>.table-responsive-sm 类用于创建响应式表格，在屏幕宽度小于 576px 时显示水平滚动条。</p>                                                                                      
  <p>重置浏览器大小查看效果。</p>
  <div class="table-responsive-sm">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
  </div>
    <h2>响应式表格</h2>
    <p>.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:</p>                                                                                      
    <div class="table-responsive">          
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>
    </div>
    <h2>较小的表格</h2>
    <p>.table-sm 类用于通过减少内边距来设置较小的表格:</p>            
    <table class="table table-bordered table-sm">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
    <h2>指定意义的颜色类</h2>
    <p>通过指定意义的颜色类可以为表格的行或者单元格设置颜色：</p>            
    <table class="table">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Default</td>
          <td>Defaultson</td>
          <td>def@somemail.com</td>
        </tr>      
        <tr class="table-primary">
          <td>Primary</td>
          <td>Joe</td>
          <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
          <td>Success</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
          <td>Danger</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
          <td>Info</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
          <td>Warning</td>
          <td>Refs</td>
          <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
          <td>Active</td>
          <td>Activeson</td>
          <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
          <td>Secondary</td>
          <td>Secondson</td>
          <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
          <td>Light</td>
          <td>Angie</td>
          <td>angie@example.com</td>
        </tr>
        <tr class="table-dark text-dark">
          <td>Dark</td>
          <td>Bo</td>
          <td>bo@example.com</td>
        </tr>
      </tbody>
    </table>





    <h2>黑色条纹表格</h2>
    <p>联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：</p>            
    <table class="table table-dark table-striped">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
    <h2>鼠标悬停状态表格</h2>
    <p>.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：</p>            
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>


    <h2>带边框表格</h2>
    <p>.table-bordered 类可以为表格添加边框:</p>            
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
  </table>
  </div>

  <div class="container">
    <h2>条纹表格</h2>
    <p>通过添加 .table-striped 类，来设置条纹表格:</p>            
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ></div>
  <!-- built files will be auto injected -->

  <div id="index">
    <div class="alert alert-success" role="alert">...</div>
    <div class="alert alert-info" role="alert">...</div>
    <div class="alert alert-warning" role="alert">...</div>
    <div class="alert alert-danger" role="alert">... <a href="./index2.html">index2</a></div>
   
  </div>

 <script>
   $(function () {
      $('[data-toggle="popover"]').popover()
   })
 </script>

<div class="container">
  <div class="jumbotron">
    <h1>W3Cschool</h1> 
    <p>学编程，从W3Cschool开始！</p> 
  </div>
  <p>这是一些文本。</p>      
  <p>这是一些文本。</p>      
</div>
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>W3Cschool</h1> 
    <p>学编程，从W3Cschool开始！</p>
  </div>
</div>

<div class="container">
  <h2>提示框</h2>
  <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
  <div class="alert alert-success">
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info">
    <strong>信息!</strong> 请注意这个信息。
  </div>
  <div class="alert alert-warning">
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger">
    <strong>错误!</strong> 失败的操作
  </div>
  <div class="alert alert-primary">
?   <strong>首选!</strong> 这是一个重要的操作信息。
  </div>
  <div class="alert alert-secondary">
?   <strong>次要的!</strong> 显示一些不重要的信息。
  </div>
  <div class="alert alert-dark">
?   <strong>深灰色!</strong> 深灰色提示框。
  </div>
  <div class="alert alert-light">
?   <strong>浅灰色!</strong>浅灰色提示框。
  </div>
</div>

<div class="container">
  <h2>提示框添加链接</h2>
  <p>提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：</p>
  <div class="alert alert-success">
    <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-info">
    <strong>信息!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-warning">
    <strong>警告!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-danger">
    <strong>错误!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-primary">
    <strong>首选!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-secondary">
    <strong>次要的!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-dark">
    <strong>深灰色!</strong>你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-light">
    <strong>灰色!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
</div>

<div class="container">
  <h2>提示框添加链接</h2>
  <p>提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：</p>
  <div class="alert alert-success">
    <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-info">
    <strong>信息!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-warning">
    <strong>警告!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-danger">
    <strong>错误!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-primary">
    <strong>首选!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-secondary">
    <strong>次要的!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-dark">
    <strong>深灰色!</strong>你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-light">
    <strong>灰色!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
</div>

<div class="container">
  <h2>关闭提示框</h2>
  <p>我们可以在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。</p>
  <div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>
  <div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>错误!</strong> 失败的操作。
  </div>
  <div class="alert alert-primary alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>首选!</strong> 这是一个重要的操作信息。
  </div>
  <div class="alert alert-secondary alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>次要的!</strong> 显示一些不重要的信息。
  </div>
  <div class="alert alert-dark alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>深灰色!</strong> 深灰色提示框。
  </div>
  <div class="alert alert-light alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>浅灰色!</strong>浅灰色提示框。
  </div>
</div>


<script>
  var app2 = new Vue({
   el: '#app2',
data: {
  message: 'Hello Vue! app2'
}
})
</script>

<div id="app">

</div>

</body>
</html>